<template>
	<div class="g-manager">
		<el-card shadow="always" :body-style="{ padding: '20px' }">
			<el-button type="warning" size="mini" icon="el-icon-user" 
				>添加角色</el-button
			>
		</el-card>

		<el-table :data="roles" border stripe>
			<el-table-column prop="r_id" label="序号"> </el-table-column>
			<el-table-column prop="rolename" label="角色名称">
			</el-table-column>
			<el-table-column prop="description" label="描述"> </el-table-column>

			<el-table-column label="操作">
				<template v-slot="scope">
					<el-button
						type="warning"
						size="small"
						@click="onDelete(scope.row.id)"
						>删除</el-button
					>
					<el-button
						type="success"
						size="small"
						@click="onEdit(scope.row.id)"
						>编辑</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { RequestRoles } from '@/api/system'
export default {
	data() {
		return {
			roles: []
		}
	},
	created() {
		this.getRoles()
	},
	methods: {
		async getRoles() {
			let data = await RequestRoles()
			let { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.roles = resultInfo.roles
			}
		},
		/**
		 * 显示角色名称
		 */
		showRoleName(roleId) {
			let role = this.roles.find(item => item.r_id == roleId)
			
			return role.rolename + ' - ' + role.description
		},
		/**
		 * 编辑
		 */
		onEdit(id) {
			this.$message('编辑')
		},
		/**
		 * 删除
		 */
		onDelete(id) {
			this.$message('删除')
		}
	}
}
</script>

<style>
</style>